#root {
  max-width: 1280px;
  padding: 2rem;
  height: 100%;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.page {
  min-height: 100%;
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.likes {
  width: 35px;
  height: 35px;
  border: 0px;
  margin: 3px 2px 6px;
  cursor: Pointer;
  display: inline-block;
  position: absolute;
  bottom: -1em;
  right: -1em;
}

.liked,
.unliked:hover {
  background:
    url("assets/yellow-thumbsup.svg"),
    linear-gradient(transparent, transparent) no-repeat;
  background-size: 35px;
}

.unliked .liked-by-tooltip {
  visibility: hidden;
}
.liked .liked-by-tooltip {
  visibility: hidden;
  opacity: 0;
}
.liked:hover .liked-by-tooltip {
  visibility: visible;
  z-index: 1;
  position: absolute;
  overflow: visible;
  background-color: #111;
  color: #eee;
  width: 200px;
  padding: 0.5em;
  border-radius: 0.5em;
  opacity: 1;
  transition: opacity 0.25s 0.25s;
}

.unliked {
  background:
    url("assets/greyscale-thumbsup.svg"),
    linear-gradient(transparent, transparent) no-repeat;
  background-size: 35px;
}

.likes-count-badge {
  color: #eee;
  background-color: #444;
  border-radius: 5px;
  padding: 1px 3px;
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  cursor: Pointer;
}

.prevent-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  visibility: hidden;
}

.message {
  margin: 1em;
  padding: 0.5em;
  border-radius: 0.5em;
  min-width: 60%;
  max-width: 60%;
  width: fit-content;
  clear: both;
  position: relative;
}
.sent {
  float: right;
  background-color: blue;
}
.received {
  background-color: grey;
}

.messages {
  padding: 0em 1em 4em;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 80vh;
  overscroll-behavior: none;
  flex-grow: 1;
}

.new-message {
  overflow: auto;
  display: flex;
  clear: both;
  bottom: 0;
  height: 3em;
}
.author {
  width: 15%;
}
.body {
  flex: 1;
}

button {
  float: right;
}
